<template>
  <div :class="['form-input-number', disabled ? 'disabled' : '']">
    <el-input-number size="mini" :disabled="disabled" controls-position="right" ref="number" v-model="inputNumber" @change="handleChange"></el-input-number>
  </div>
</template>

<script>
export default {
  props: {
    value: {},
    x: {
      type: Number,
      default: 0
    },
    y: {
      type: Number,
      default: 0
    },
    disabled: {
      type: Boolean,
      default: false
    },
    type: {},
    tdStyle: {}
  },
  watch: {
    value: {
      handler(val) {
        if (val === 0) {
          this.inputNumber = 0;
        } else {
          this.inputNumber = val || undefined;
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      inputNumber: undefined
    };
  },
  methods: {
    handleChange(value) {
      this.$emit('input', {
        value,
        x: this.x,
        y: this.y
      });
    }
  }
};
</script>

<style lang="scss" scoped>
// .form-input {
//   width: 100%;
//   height: 100%;
//   position: absolute;
//   box-sizing: border-box;
//   top: 0;
//   left: 0;
//   border: none;

//   ::v-deep .el-input__inner {
//     height: 100%;
//     line-height: 100%;
//     border-radius: 0;
//     text-align: center;
//     &:focus {
//       border-color: transparent;
//     }
//   }
// }
.form-input-number {
  padding: 0 5px;
  box-sizing: border-box;
  &.disabled {
    pointer-events: none;
  }
  ::v-deep .el-input-number {
    width: 100%;
  }
}
</style>
